<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>节流</title>
</head>
<body>
    <div>
        <input type="text">
    </div>
    <script>
        // 1.节流：高频触发事件，只会在指定的时间段内执行事件回调


        /*  时间戳节流：
            1. 第一次触发事件时，会立即执行事件回调
            2. 之后的触发事件，会在指定的时间段内执行事件回调
            3. 最后一次触发事件，会在指定的时间段内执行事件回调
        function timeStampThrottle(fn,wait=500) {
            let lastTime = 0;
            return function (...args) {
                let now = +new Date();
                if(now -lastTime > wait) {
                    lastTime = now;
                    fn.apply(this,args);
                }
            }
        }

        const inp = document.querySelector('input');
        inp.addEventListener('input',timeStampThrottle(function (e) {
            console.log(888)
        },1000)) */

        function setTimeoutThrottle(fn,wait=500) {
            let timer = 0;
            return function (...args) {
                // if(!timer) {
                //     timer = setTimeout(() => {
                //         fn.apply(this,args);
                //         timer = 0;
                //     }, wait);
                // }

                var that = this;
                var arguments = args;
                if(timer) return ;
                timer = setTimeout(() => {
                  fn.apply(that,arguments);
                  timer = 0;  
                }, wait);
            }
        }
        const inp = document.querySelector('input');
        inp.addEventListener('input',setTimeoutThrottle(function (e) {
            console.log(888)
        },1000))
    </script>
</body>
</html>